<template>
	<view class="upload">
		<!-- 问题内容 -->
		<view class="matter">
			<!-- 标题 -->
			<view style="height: 50px; padding: 2rpx;">
				<input class="text" :type="text" v-model="questionInfo.questiontitle" placeholder="请输入标题" maxlength="20"></input>
			</view>
			<!-- 主要内容 -->
			<view class="character">
				<textarea rows="15" maxlength="500" wrap="hard" style="margin: 0;" class="u-character" placeholder="请输入问题描述..."
					v-model="questionInfo.describe" />
			</view>
			<!-- 截图 -->
			<view style="">
				<u-upload 
					class="uUpload" 
					:size-type="['original', 'compressed']" 
					:source-type="['album', 'camera']" max-count="6" name="file"
					ref="imageLoad"
					:action="action"
					@on-success="imageLoadSuccess"
					@on-error="imageLoadError"
					@on-remove="removeImg"
					>
				</u-upload>
			</view>
		</view>
		<!-- 问题类型选择 -->
		<view class="select">
			<!-- 问题类型选择 -->
			<u-popup v-model="selectShow" mode="center" width="650" height="500" mask-close-able border-radius="20" >
				<!-- 问题类型列表 -->
				<view class="valueView">
					<scroll-view class="selectScroll" scroll-y="true" style="height: 300rpx;">
						<u-tag  
							show
							class="selectTag" 
							v-for="(major,index) in majorList" 
							v-if=""
							:text="major.name"  					
							v-on:click="selectDecideOn(index)">
						</u-tag>
					</scroll-view>
				</view>
				<u-line color="#c8c9cc" hair-line="false" />
				<!-- 已经选择的类型 -->
				<view class="selectOkTag">
					<i style="color: #18b566;font-size: 25rpx;margin-left: 30rpx;margin-top: 10rpx;">已选类型:</i>
					<u-tag class="tag" 
						type="success"  
						closeable
						v-for="type in majored" 
						:text="type.name"  
						:show="true"					
						@close="selectClose(type.id)" >
					</u-tag>
				</view>
				<!-- 确定我的选择 -->
				<view class="selectButton">
					<u-button type="warning" size="medium" @click="selectButtonClick">确定</u-button>
				</view>
			</u-popup>	
			<u-icon size="30" class="tags-fill" name="tags-fill" @click="selectShow=true" label="问题类型">
			</u-icon>
		</view>
		<!-- 弹窗 -->
		<view class="wrap">
			<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
		</view>
		<div style="display: flex;justify-content: space-evenly;">
			<!-- 返回 -->
			<u-button type="default" size="medium " @click="quit">退出</u-button>
			<!-- 提交 -->
			<u-button type="success" @click="submit" size="medium ">发布</u-button>
		</div>
		<u-modal v-model="show" width="60%" title="提示" :content="tips"></u-modal>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show:false,
				tips:"",
				//上传服务器地址
				action: this.$url+"questioninfo/uploadImage",
				//选择类型弹窗显示
				selectShow: false,
				//标题的类型
				text: 'text',
				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				//选择标签
				majorList: this.$store.getters.majorList,
				//上传问题
				questionInfo:{
					userid:this.$store.getters.user.userid,
					questiontitle:"",
					describe:"",	
					//经度
					longitude:this.$store.getters.user.longitude,
					//纬度
					latitude:this.$store.getters.user.latitude,
					imagePathList:[],
					typeIdList:[]
				},
				//已选专业
				majored:[],
				//标签显示
				tagShow: false,
			}
		},
		onLoad() {
		},
		methods: {
			open(tips){
				this.show = true;
				this.tips = tips;
			},
			//选择专业标签
			selectDecideOn(index){
				if(this.majored.length<3){
					console.log("添加专业"+this.majorList[index].name);
					this.questionInfo.typeIdList.push(this.majorList[index].id);
					//已选显示
					this.majored.push(this.majorList[index]);
				}else{
					this.open("最多只能选择3个专业类型");
				}
			},	
			//取消专业标签
			selectClose(majorId){
				console.log("删除选中专业");
				this.questionInfo.typeIdList = this.questionInfo.typeIdList.filter(t => t != majorId);
				this.majored = this.majored.filter(t => t.id != majorId);
			},
			//确定我的选择
			selectButtonClick(){
				this.selectShow=false;
			},
			//移除图片
			removeImg(index, lists, name){
				console.log("移除照片");
				this.questionInfo.imagePathList = [];
				for (var i = 0; i < lists.length; i++) {
					this.questionInfo.imagePathList.push(lists[i].response.data);
				}
			},
			//图片上传成功
			imageLoadSuccess(data, index, lists, name) {
				//返回上传图片路径并存到questionInfo.imagePath
				console.log(lists);
				this.questionInfo.imagePathList.push(data.data);
			},
			//图片上传失败
			imageLoadError(){
				console.log("图片上传失败");
			},
			//提交发布
		 	submit() {
				//上传照片
				//this.$refs.imageLoad.upload();
				if(this.questionInfo.questiontitle != "" 
					&& this.questionInfo.describe != ""
					&& this.questionInfo.typeIdList.length > 0){
						//发布问题
						uni.request({
							url:this.$url+"questioninfo/uploadQuestion",
							method:"POST",
							data:{
								userid:this.$store.getters.user.userid,
								questiontitle:this.questionInfo.questiontitle,
								describe:this.questionInfo.describe,	
								//经度
								longitude:this.$store.getters.user.longitude,
								//纬度
								latitude:this.$store.getters.user.latitude,
								imagePathList:this.questionInfo.imagePathList,
								typeIdList:this.questionInfo.typeIdList
							},
							success: (res) => {
								this.open("问题发布成功");
								//this.quit();
							},
							fail: () => {
								this.open("问题发布失败");
							}
						})
				}else{
					this.open("请将问题信息描述完整");
				}
				
			},	
			//退出发布页面
			quit(){
				//初始化数据
				this.questionInfo.questiontitle="";
				this.questionInfo.describe="";
				this.questionInfo.typeIdList=[];
				this.questionInfo.imagePathList=[];
				this.majored=[];
				this.$refs.imageLoad.clear();
				wx.switchTab({
					url:'/pages/first-pages/home-page/home-page'
				})
			},
		},
	}
</script>
<style lang="scss">
	.upload {}

	.roleimage {
		float: left;
	}

	.role {
		height: 90rpx;
		margin: 20rpx;
	}

	.matter {}

	.select {
		width: 97%;
		height: 80rpx;
	}

	.wrap {}

	.tags-fill {
		background-color: #dbf1e1;
		border-radius: 20rpx;
		padding: 7rpx;
		position: relative;
		left: 45rpx;
	}
	
	// .submitupload {
	// 	margin: 10rpx;
	// 	z-index: 999;
	// 	color: $u-type-error!important;
	// 	border-color: $u-type-error-disabled!important;
	// 	background-color: $u-type-error-light!important;
	// }

	.emptyupload {
		position: absolute;
		top: -95rpx;
		margin: 10rpx;
		z-index: 999;
		left: 1%;
	}

	.tag {
		margin: 15rpx;
		position: relative;
		left: 30rpx;
	}

	.text {
		width: 92%;
		font-size: 35rpx;
		color: $u-main-color;
		flex: 1;
		padding: 5rpx;
		border-bottom: 0.5px solid #C0C4CC;
		position: relative;
		left: 25rpx;
		height: 80rpx;
		top: 30rpx;
	}

	.character {
		padding: 20rpx;
		height: 310rpx;
		margin: 10rpx;
	}

	.u-character {
		font-size: 30rpx;
	}

	.uUpload {
		margin: 5rpx;
		position: relative;
		left: 40rpx
	}
	
	.selectTag{
		margin: 12rpx;
	}
	
	.selectScroll{
		position: relative;
		
		padding: 10rpx;
		margin: 5rpx;
		
	}
	
	.valueView{
		height: 40%;
		
	}
	.selectButton{
		margin: 5rpx;
		padding: 5rpx;
		position: relative;
		text-align: center;
	}
	
	.selectOkTag{
		height: 40%;
	}
	
</style>
